import React from 'react';
import styles from './DeviceList.module.less';
import { observer } from "mobx-react-lite";
import homeStore from '../../homeStore';
import homeRenderer from '../../homeRender';

// 设备列表组件
const DeviceList = observer(() => {
    // 从store获取设备数据
    const { deviceDatas } = homeStore;

    return (
        <div className={styles.deviceList}>
            <div className={styles.title}>设备列表</div>
            <div className={styles.list}>
                {deviceDatas.map((device) => (
                    <div
                        key={device.id}
                        className={styles.deviceItem}
                        onClick={() => {
                            // 点击设备时，设置当前设备为点击的设备
                            homeRenderer.lookAtDevice(device.id);
                        }}
                    >
                        <span className={styles.deviceId}>{device.id}</span>
                        <span className={styles.deviceName}>{device.name || device.textContainer || '未命名设备'}</span>
                    </div>
                ))}

                <div
                    key="default"
                    className={styles.deviceItem}
                    onClick={() => {
                        // 点击默认视角时，设置当前设备为null
                        homeRenderer.defaultLookAt();
                    }}
                >
                    <span className={styles.deviceName}>默认视角</span>
                </div>

            </div>
        </div>
    );
});

export default DeviceList;